<template>
  <div id="main">
    <div v-if="!isInput" @click="isInput = !isInput" id="noInput">
      添加新评论
    </div>
    <a-comment id="input" v-else>
      <b v-if="type">你回复的&nbsp;{{name}}</b>
      <div slot="content">
        <a-form-item>
          <a-textarea :rows="4"  v-model="commentText" />
        </a-form-item>
        <a-form-item>
          <a-button html-type="submit"  type="primary" @click="addComment">
            发布
          </a-button>
        </a-form-item>
      </div>
    </a-comment>
    <div id="shelter" v-if="isInput"></div>
  </div>
</template>
<script>
export default {
  name:'Reply',
  props:['type', 'name'],
  data() {
    return {
      commentText: "",
      isInput: false
    };
  },
  methods: {
    addComment() {
      this.$emit("submit", this.commentText)
      this.commentText = ""
      this.isInput = !this.isInput
    }
  },
};
</script>
<style lang="less" scoped>
  html, body{
    height: 100%;
  }
  #main {
    height: 100%;
    #noInput {
      padding-top: 20px;
      padding-bottom: 20px;
      background-color: #eee;
      border-radius: 10px;
      width: 100%;
    }
    #input {
      font-size: 30px;
      z-index: 1000;
      position: fixed;
      bottom: 0;
      width: 100%;
    }
    #shelter{
      width: 100%;
      height: 100%;
      background-color: #eff;
      z-index: 500;
      opacity: 80%;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
</style>